<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highmaps Example</title>

		<style type="text/css">

		</style>
	</head>
	<body>
<script src="../../code/highmaps.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/offline-exporting.js"></script>
<script src="../../code/mapdata/custom/europe.js"></script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>



		<script type="text/javascript">
// Instantiate the map
Highcharts.mapChart('container', {
    chart: {
        map: 'custom/europe',
        borderWidth: 1
    },

    title: {
        text: 'Nordic countries'
    },

    subtitle: {
        text: 'Demo of drawing all areas in the map, only highlighting partial data'
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Country',
        data: [
            ['is', 1],
            ['no', 1],
            ['se', 1],
            ['dk', 1],
            ['fi', 1]
        ],
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            formatter: function () {
                if (this.point.value) {
                    return this.point.name;
                }
            }
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}'
        }
    }]
});

		</script>
	</body>
</html>
